<template>
  <div class="vmodel-child">
    <h4 class="font-medium text-gray-800 mb-3">v-model 双向绑定演示 (defineModel 版本)：</h4>

    <div class="space-y-4">
      <!-- 用户名输入 -->
      <div class="input-group">
        <label class="input-label">用户名 (v-model:username):</label>
        <div class="flex space-x-2">
          <!-- 🎯 直接使用 v-model，自动双向绑定 -->
          <input
            v-model="username"
            class="flex-1 p-2 border rounded-md text-sm"
            placeholder="输入用户名"
          />
          <button
            @click="clearUsername"
            class="px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600 text-sm"
          >
            清空
          </button>
        </div>
        <p class="text-xs text-gray-500 mt-1">当前值: {{ username }}</p>
      </div>

      <!-- 邮箱输入 -->
      <div class="input-group">
        <label class="input-label">邮箱 (v-model:email):</label>
        <div class="flex space-x-2">
          <!-- 🎯 直接使用 v-model，自动双向绑定 -->
          <input
            v-model="email"
            type="email"
            class="flex-1 p-2 border rounded-md text-sm"
            placeholder="输入邮箱地址"
            @blur="validateEmail"
          />
          <button
            @click="validateEmail"
            class="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
          >
            验证
          </button>
        </div>
        <p class="text-xs text-gray-500 mt-1">当前值: {{ email }}</p>
        <p
          v-if="emailValidation"
          :class="emailValidation.isValid ? 'text-green-600' : 'text-red-600'"
          class="text-xs mt-1"
        >
          {{ emailValidation.message }}
        </p>
      </div>

      <!-- 快速填充按钮 -->
      <div class="input-group">
        <label class="input-label">快速操作:</label>
        <div class="grid grid-cols-2 gap-2">
          <button
            @click="fillSampleData"
            class="px-3 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
          >
            填充示例数据
          </button>
          <button
            @click="clearAllData"
            class="px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm"
          >
            清空所有数据
          </button>
          <button
            @click="generateRandom"
            class="px-3 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 text-sm"
          >
            生成随机数据
          </button>
          <button
            @click="toggleCase"
            class="px-3 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 text-sm"
          >
            切换大小写
          </button>
        </div>
      </div>
    </div>

    <!-- defineModel 说明 -->
    <div class="mt-4 p-3 bg-purple-50 border border-purple-200 rounded">
      <h5 class="text-sm font-medium text-purple-800 mb-2">🎯 defineModel 优势</h5>
      <ul class="text-xs text-purple-700 space-y-1">
        <li>• <strong>代码简洁</strong>：无需手动定义 props 和 emits</li>
        <li>• <strong>自动同步</strong>：直接赋值 model.value 即可更新父组件</li>
        <li>• <strong>类型安全</strong>：TypeScript 自动推导类型</li>
        <li>• <strong>响应式</strong>：像使用 ref 一样简单</li>
        <li>• <strong>Vue 3.3+</strong>：现代化的双向绑定解决方案</li>
      </ul>
    </div>

    <!-- 代码对比 -->
    <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded">
      <h5 class="text-sm font-medium text-green-800 mb-2">📊 代码简化对比</h5>
      <div class="text-xs text-green-700 space-y-1">
        <p><strong>传统方式</strong>：需要 Props 接口 + defineProps + defineEmits + 手动 emit</p>
        <p><strong>defineModel</strong>：只需 1 行定义，直接赋值即可同步</p>
        <p><strong>代码减少</strong>：从 ~15 行减少到 ~2 行 (减少 85% 代码量)</p>
      </div>
    </div>

    <!-- 数据同步状态 -->
    <div class="mt-4 p-3 bg-gray-100 rounded">
      <h5 class="text-sm font-medium text-gray-800 mb-2">📊 数据同步状态</h5>
      <div class="text-xs text-gray-600 space-y-1">
        <p>用户名字符数: {{ username.length }}</p>
        <p>邮箱字符数: {{ email.length }}</p>
        <p>最后更新时间: {{ lastUpdateTime }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 🎯 使用 defineModel 定义双向绑定模型（就这么简单！）
const username = defineModel<string>('username', { default: '' })
const email = defineModel<string>('email', { default: '' })

// 响应式数据
const emailValidation = ref<{ isValid: boolean; message: string } | null>(null)
const lastUpdateTime = ref(new Date().toLocaleTimeString())

// 🎯 监听数据变化，自动更新时间（不需要手动 emit 了）
watch(
  [username, email],
  () => {
    updateTime()
    // 清除邮箱验证结果当邮箱变化时
    emailValidation.value = null
  },
  { deep: true },
)

// 更新时间
const updateTime = () => {
  lastUpdateTime.value = new Date().toLocaleTimeString()
}

// 🎯 清空用户名（直接赋值，自动同步！）
const clearUsername = () => {
  username.value = ''
  // updateTime() 会通过 watch 自动调用
}

// 🎯 验证邮箱（直接访问 defineModel 的值）
const validateEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  const isValid = emailRegex.test(email.value)

  emailValidation.value = {
    isValid,
    message: isValid ? '✅ 邮箱格式正确' : '❌ 邮箱格式不正确',
  }
}

// 🎯 填充示例数据（直接赋值，自动同步！）
const fillSampleData = () => {
  username.value = 'vue3-developer'
  email.value = 'developer@vue3.com'
  // updateTime() 会通过 watch 自动调用
}

// 🎯 清空所有数据（直接赋值，自动同步！）
const clearAllData = () => {
  username.value = ''
  email.value = ''
  emailValidation.value = null
  // updateTime() 会通过 watch 自动调用
}

// 🎯 生成随机数据（直接赋值，自动同步！）
const generateRandom = () => {
  const randomNames = ['alice', 'bob', 'charlie', 'diana', 'edward']
  const randomDomains = ['example.com', 'test.org', 'demo.net']

  const randomName = randomNames[Math.floor(Math.random() * randomNames.length)]
  const randomNumber = Math.floor(Math.random() * 1000)
  const randomDomain = randomDomains[Math.floor(Math.random() * randomDomains.length)]

  username.value = `${randomName}${randomNumber}`
  email.value = `${randomName}${randomNumber}@${randomDomain}`
  // updateTime() 会通过 watch 自动调用
}

// 🎯 切换大小写（直接访问和赋值，自动同步！）
const toggleCase = () => {
  const newUsername =
    username.value === username.value.toLowerCase()
      ? username.value.toUpperCase()
      : username.value.toLowerCase()

  username.value = newUsername
  // updateTime() 会通过 watch 自动调用
}
</script>

<style scoped lang="scss">
.vmodel-child {
  @apply border border-gray-200 rounded-lg p-4 bg-gray-50;
}

.input-group {
  @apply p-3 bg-white rounded border border-gray-100;
}

.input-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}
</style>
